<template>
  <div
    style="width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.2)"
    v-loading="loading"
  >
    <div
      v-if="isLoginInfo"
      style="text-align: center; padding-left: 35%; padding-top: 13%"
    >
      <ElCard
        style="max-width: 480px; opacity: 0.7; background-color: gainsboro"
        shadow="always"
      >
        <template #header>
          <h2>登录</h2>
        </template>

        <div>
          <div style="padding-bottom: 10px">
            <ElInput
              prefix-icon="User"
              placeholder="用户名"
              size="large"
              style="color: salmon"
              v-model="loginInfo.username"
            ></ElInput>
          </div>
          <div>
            <ElInput
              prefix-icon="Unlock"
              placeholder="密码"
              size="large"
              show-password
              v-model="loginInfo.password"
            ></ElInput>
          </div>
        </div>

        <template #footer>
          <div>
            <div>
              <ElButton type="primary" style="width: 100%" @click="login"  @keyup="dokeyup"
                >立即登录</ElButton
              >
            </div>
            <div style="padding-top: 5px">
              没有账号?
              <ElLink
                style="color: slateblue; font-size: 18px"
                @click="isLoginInfo = false"
                >立即注册</ElLink
              >
            </div>
            <div style="padding-top: 5px; text-align: end">
              <ElLink
                style="color: slateblue; font-size: 18px"
                @click="router.push('/')"
                ><-返回首页</ElLink
              >
            </div>

          </div>
        </template>
      </ElCard>
    </div>

    <div
      v-if="!isLoginInfo"
      style="text-align: center; padding-left: 35%; padding-top: 13%"
    >
      <ElCard
        style="max-width: 480px; opacity: 0.7; background-color: gainsboro"
        shadow="always"
      >
        <template #header>
          <h2>注册</h2>
        
        </template>
      
        <div>
          <div style="padding-bottom: 10px">
            <ElInput
              v-model="regInfo.username"
              prefix-icon="User"
              placeholder="用户名"
              size="large"
              style="color: salmon"
            ></ElInput>
          </div>
          <div>
            <ElInput
              v-model="regInfo.password"
              prefix-icon="Unlock"
              placeholder="密码"
              size="large"
              show-password
            ></ElInput>
          </div>
        </div>

        <template #footer>
          <div>
            <div>
              <ElButton type="primary" style="width: 100%" @click="reg" @keyup="dokeyups"
                >立即注册</ElButton
              >
            </div>
            <div style="padding-top: 5px; text-align: end">
              <ElLink
                style="color: slateblue; font-size: 18px"
                @click="isLoginInfo = true"
                ><-返回登录</ElLink
              >
            </div>
          </div>
          
        </template>
      </ElCard>
    </div>
  </div>
</template>

<script setup>
import {
  ElButton,
  ElCard,
  ElInput,
  ElLink,
  ElMessage,
  ElMessageBox,
} from 'element-plus';
import { ref } from 'vue';
import Api from '../../script/Api';
import { useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import userstore from '../../store/user';
const { getLoginInfo } = userstore();

const router = useRouter();


const dokeyup=(event) => {
  if(event.key=='Enter'){
    login();
  }
}

const dokeyups=(event) => {
  if(event.key=='Enter'){
   reg();
  }
}


const loginInfo = ref({
  username: '',
  password: '',
});

const regInfo = ref({
  username: '',
  password: '',
});

const loading = ref(false);

const login = () => {
  loading.value = true;
  Api.post('/user/login', loginInfo.value, (data) => {
    if (data.success) {
      ElMessage.success('登录成功');
      if (data.data.role.id == 1) {
        router.push('/admin');
        getLoginInfo();
        loading.value = false;
        return;
      }
      getLoginInfo();
      router.push('/');
      loading.value = false;
    } else {
      loading.value = false;
      ElMessage.error(data.message);
    }
  });
};

const reg = () => {
  Api.post('/user/reg', loginInfo.value, (data) => {
    console.log('data', data);
    if (data.success) {
      ElMessage.success('注册成功');
    } else {
      ElMessage.error(data.message);
    }
  });
};

const isLoginInfo = ref(true);
</script>

<style scoped></style>
